<template>
  <div class="cycle-box">
    <div class="installment-item" v-for="item in installmentList">
      <div class="item-box">
        <span>卡号</span>
        <span>{{ item.cardNumber}}</span>
      </div>
      <div class="item-box">
        <span>币种</span>
        <span>{{ item.payWay }}</span>
      </div>
      <div class="item-box">
        <span>原交易日期</span>
        <span>{{ item.saleDate }}</span>
      </div>
      <div class="item-box">
        <span>申请日期</span>
        <span>{{ item.applicationData }}</span>
      </div>
      <div class="item-box">
        <span>分期金额</span>
        <span>{{ item.installmentPrice }}元</span>
      </div>
      <div class="item-box">
        <span>分期期数</span>
        <span>{{ item.installmentNumber }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import dropdownTop from "@comp/dropdownTop";
import {Random} from "mockjs";

export default {
  name: "billCycle",
  components: {
    dropdownTop
  },
  data() {
    return {

      installmentList: [
        {
          cardNumber:Random.string("number", 12),
          payWay:'人民币',
          saleDate:'2021-02-17',
          applicationData: '分期类型',
          installmentPrice: Random.natural(10, 1000),
          installmentNumber: '6',
        },

      ],
    };
  },
  methods: {
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },
    handleTypeCard() {
      const column1 = [
        {text: "普通账单", value: "1"},
        {text: "专项账单", value: "2"}
      ];
      if (!this.picker) {
        this.picker = this.$createPicker({
          data: [column1],
          onSelect: () => {
            console.log(1);
          },
          onCancel: () => {
            console.log("取消");
          }
        });
      }
      this.picker.show();
    }
  }
};
</script>

<style lang="stylus" scoped>
/deep/ .van-cell
  padding 0
  color #333333
  font-size 32px

.cycle-box
  display flex
  width 100%
  flex-direction column
  background #fff
  min-height 100vh
  color #333
  .installment-item
    font-size 30px
    //height 90px
    color #333

    .item-box
      padding 0 30px
      height 90px
      display flex
      justify-content space-between
      align-items center
      border-bottom 1px solid #E6E6E6
      .yellow
        height 90px
        display flex
        justify-content center
        align-items center
        width 100%
        color #FFA900
      &:nth-of-type(1)
        color #666666



</style>
